import React, { Component } from 'react'
import './index.less'
import { Form, Input, Button, Row, Col, Select, DatePicker } from 'antd';
import moment from 'moment'
const FormItem = Form.Item;
const Option = Select.Option;

class WeeklyForm4 extends Component {

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.submit(values, {type1: 'data4', type2: 'modifyRecord4', type3: 'modalVisible4'});
      }
    });
  }

  close = () => {
    if (this.props.modifyRecord) {
      this.props.modifyRecord.deliveryDate = moment(this.props.modifyRecord.deliveryDate).format('YYYY-MM-DD');
    }
    this.props.close();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };
    return (
      <Form onSubmit={this.handleSubmit} className="weekly-form">
        <Row gutter={40} className="weekly-form-row">
            <Col span={12}>
            <FormItem label="序号" {...formItemLayout}>
                {getFieldDecorator('index', {
                  rules: [{ required: true, message: '请输入序号！' }],
                  initialValue: this.props.modifyRecord.index || this.props.index
                })(
                  <Input placeholder="序号" disabled />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目名称" {...formItemLayout}>
                {getFieldDecorator('name', {
                  rules: [{ required: true, message: '请输入项目名称！' }],
                  initialValue: this.props.modifyRecord.name
                })(
                  <Input placeholder="项目名称" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目编号" {...formItemLayout}>
                {getFieldDecorator('projectOutCode', {
                  rules: [{ required: true, message: '请输入项目编号！' }],
                  initialValue: this.props.modifyRecord.projectOutCode
                })(
                  <Input placeholder="项目编号" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目经理" {...formItemLayout}>
                {getFieldDecorator('manager', {
                  rules: [{ required: true, message: '请输入项目经理！' }],
                  initialValue: this.props.modifyRecord.manager
                })(
                  <Select allowClear>
                    {
                      this.props.managerList.map((item, index) =>
                        <Option key={index} value={item.value}>{item.name}</Option>
                      )
                    }
                </Select>
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目预计投入人力(应用研发)" {...formItemLayout}>
                {getFieldDecorator('appHrPlan', {
                  rules: [{ required: true, message: '请输入项目预计投入人力(应用研发)！' }],
                  initialValue: this.props.modifyRecord.appHrPlan
                })(
                  <Input type="number" min={0} step={1} placeholder="项目预计投入人力(应用研发)" addonAfter="人天" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目预计投入人力(系统研发)" {...formItemLayout}>
                {getFieldDecorator('sysHrPlan', {
                  rules: [{ required: true, message: '请输入项目预计投入人力(系统研发)！' }],
                  initialValue: this.props.modifyRecord.sysHrPlan
                })(
                  <Input type="number" min={0} step={1} placeholder="项目预计投入人力(系统研发)" addonAfter="人天" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目预计投入人力(QA)" {...formItemLayout}>
                {getFieldDecorator('qaHrPlan', {
                  rules: [{ required: true, message: '请输入项目预计投入人力(QA)！' }],
                  initialValue: this.props.modifyRecord.qaHrPlan
                })(
                  <Input type="number" min={0} step={1} placeholder="项目预计投入人力(QA)" addonAfter="人天" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目实际投入人力(应用研发)" {...formItemLayout}>
                {getFieldDecorator('appHrReal', {
                  rules: [{ required: true, message: '请输入项目实际投入人力(应用研发)！' }],
                  initialValue: this.props.modifyRecord.appHrReal
                })(
                  <Input type="number" min={0} step={1} placeholder="项目实际投入人力(应用研发)" addonAfter="人天" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目实际投入人力(系统研发)" {...formItemLayout}>
                {getFieldDecorator('sysHrReal', {
                  rules: [{ required: true, message: '请输入项目实际投入人力(系统研发)！' }],
                  initialValue: this.props.modifyRecord.sysHrReal
                })(
                  <Input type="number" min={0} step={1} placeholder="项目实际投入人力(系统研发)" addonAfter="人天" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目实际投入人力(QA)" {...formItemLayout}>
                {getFieldDecorator('qaHrReal', {
                  rules: [{ required: true, message: '请输入项目实际投入人力(QA)！' }],
                  initialValue: this.props.modifyRecord.qaHrReal
                })(
                  <Input type="number" min={0} step={1} placeholder="项目实际投入人力(QA)" addonAfter="人天" />
                )}
              </FormItem>
            </Col>

            <Col span={12}>
              <FormItem label="项目交付时间" {...formItemLayout}>
                {getFieldDecorator('deliveryDate', {
                  rules: [{ required: true, message: '请输入项目交付时间！' }],
                  initialValue: this.props.modifyRecord.deliveryDate
                })(
                  <DatePicker placeholder="项目交付时间" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目交付时效" {...formItemLayout}>
                {getFieldDecorator('delay', {
                  rules: [{ required: true, message: '请输入项目交付时效！' }],
                  initialValue: this.props.modifyRecord.delay
                })(
                  <Input placeholder="项目交付时效" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="技术难度" {...formItemLayout}>
                {getFieldDecorator('techDiff', {
                  rules: [{ required: true, message: '请输入技术难度！' }],
                  initialValue: this.props.modifyRecord.techDiff
                })(
                  <Input placeholder="技术难度" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="技术文档质量" {...formItemLayout}>
                {getFieldDecorator('docQuality', {
                  rules: [{ required: true, message: '请输入技术文档质量！' }],
                  initialValue: this.props.modifyRecord.docQuality
                })(
                  <Input placeholder="技术文档质量" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="demo质量" {...formItemLayout}>
                {getFieldDecorator('demoQuality', {
                  rules: [{ required: true, message: '请输入demo质量！' }],
                  initialValue: this.props.modifyRecord.demoQuality
                })(
                  <Input placeholder="demo质量" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="是否被产品采纳" {...formItemLayout}>
                {getFieldDecorator('accepted', {
                  rules: [{ required: true, message: '请选择是否被产品采纳！' }],
                  initialValue: this.props.modifyRecord.accepted || true
                })(
                  <Select allowClear>
                    <Option value={true}>是</Option>
                    <Option value={false}>否</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="文档归档情况" {...formItemLayout}>
                {getFieldDecorator('archive', {
                  rules: [{ required: true, message: '请选择文档归档情况！' }],
                  initialValue: this.props.modifyRecord.archive || true
                })(
                  <Select allowClear>
                    <Option value={true}>是</Option>
                    <Option value={false}>否</Option>
                  </Select>
                )}
              </FormItem>
            </Col>

            <Col span={12}>
              <FormItem label="项目评级" {...formItemLayout}>
                {getFieldDecorator('level', {
                  rules: [{ required: true, message: '请输入项目评级！' }],
                  initialValue: this.props.modifyRecord.level
                })(
                  <Input placeholder="项目评级" />
                )}
              </FormItem>
            </Col>
        </Row>
        <Row>
          <Col className="butttn-group" span={24}>
            <Button type="primary" htmlType="submit">
                添加
            </Button>
            <Button style={{marginLeft: 15}} type="primary" onClick={this.close}>取消</Button>
          </Col>
        </Row>
    </Form>
    )
  }
}
export default Form.create()(WeeklyForm4);
